<template>
  <div class="com-product">
    <div class="fresh-list-box">
        <div class="list" v-for="item in xghlist">
          <!-- :to="{name:'product-detail', params:{cpid: item.id}}" -->
          <router-link to="/product-detail" :to="{name:'freshDetail', params:{cpid: item.id}}" class="img"><img :src="item.imgsrc"></router-link>
          <div class="name">{{item.name}}</div>
          <div class="down-box">
            <div class="down-left">
              <div class="price">￥{{item.price}}/{{item.spec}}</div>
              <router-link :to="{name:'freshDetail', params:{cpid: item.id}}" class="buynow">
                立即购买
              </router-link>
            </div>
            <div class="add">
              <i class="icon iconfont icon-gouwuche"></i>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import cp1 from '@/assets/image/cp1.jpg';
import cp2 from '@/assets/image/cp2.jpg';
export default {
  name: 'App',
  data(){
    return{
      cp1,cp2,
      xghlist:this.productList,
      comimgsrc:'http://api.mountainfreshes.com'
    }
  },
  props:{
    productList : {
      type : Array
    }
  },
  methods:{
    
  },
  components:{
    
  },
  created(){

  }
}
</script>

<style scoped lang="less">
.com-product{
  width: 100%;
  height: auto;
  zoom: 1;
  overflow: hidden;

}
.fresh-list-box{
    width: 100%;
    height: auto;
    zoom: 1;
    overflow: hidden;
    .list{
      width: 234px;
      height: 298px;
      float: left;
      box-sizing:border-box;
      border: 1px solid #d0d0d0;
      margin-left: 11px;
      margin-bottom: 12px;
      
      .img{
        display: block;
        width: 100%;
        height: 200px;
        img{
          width: 100%;
          height: 100%;

        }
      }
      .name{
        width: 92%;
        height: 26px;
        line-height: 26px;
        margin: 2px auto;
        font-size: 16px;
        color: #202020;
        overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
      }
      .down-box{
        width: 92%;
        height: 56px;
        margin: auto;
        .down-left{
          width: 114px;
          height: 100%;
          float: left;
          .price{
            font-size: 14px;
            color: #434343;
            width: 100%;
            height: 28px;
            line-height: 28px;
          }
          .buynow{
            display: block;
            width: 100%;
            height: 24px;
            line-height: 24px;
            font-size: 14px;
            background: #5bb756;
            color: #fff;
            text-align: center;
            margin-top: 3px;
            &:hover{
              background: #438440;
            }
          }
        }
        .add{
          width: 56px;
          height: 56px;
          cursor: pointer;
          border-box: box-sizing;
          border: 1px solid #2b6e26;
          border-radius: 100%;
          margin-right: 10px;
          float: right;
          &:hover{
            i{
              color: #438440;
            }
          }
          i{
            font-size: 38px;
            color: #2b6e26;
            font-weight: bold;
            padding-left: 7px;
            padding-top: 10px;
            float: left;
          }
        }
      }
    }
  }
</style>
